﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/attribute</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		console.log( "jQuery version: " + $.fn.jquery );

        </script>
    </head>
    <body>
        <h1>jQuery/attributes部分展示</h1>		
		<table>
		<tr>
			<td class="syntax">.hasClass()</td>
			<td>true if 含有该class</td>
		</tr>
		<tr>
			<td class="syntax">.addClass()</td>
			<td>添加class attribute</td>
		</tr>
		<tr>
			<td class="syntax">.removeClass</td>
			<td>删除class attribute</td>
		</tr>
		<tr>
			<td class="syntax">.toggleClass()</td>
			<td>加入/去除class</td>
		</tr>
		<tr>
			<td class="syntax">.attr()</td>
			<td>取值或设置attribute</td>
		</tr>
		<tr>
			<td class="syntax">.removeAttr()</td>
			<td>删除attr</td>
		</tr>
		<tr>
			<td class="syntax">.prop()</td>
			<td>取值或设置DOM element的property</td>
		</tr>
		<tr>
			<td class="syntax">.removeProp</td>
			<td>删除prop</td>
		</tr>
		<tr>
			<td class="syntax">.html()</td>
			<td>等同于innerHTML</td>
		</tr>
		<tr>
			<td class="syntax">.val()</td>
			<td>通常用于取得form element的值, 例如input, select and textarea的值.</td>
		</tr>
		</table>
		<p>注意区分attribute和property, 前者指的是html中element的attribute(特性), 后者是DOM element object的property(属性). 例如 对于"checked", attribute是"checked", property是true. attribute可以通过getAttribute()和setAttribute()访问. 而javascript中对property的访问使用.号或者[]访问. </p>
		<p>对于boolean类型的attribute, attribute出现即意为true, 通常value设置为attributeName, 也可以设置为"". </p>
		<p class="colorBlue">特别注意input的"checked", 它指定的是input element的初始状态. 而其当下是否选中的状态则关联在prop上. 同理与"selected"和"value"等dynamic attributes.</p>
	<hr/>

	<p id="redText" class="colorRed">红色文本.</p>
	<p id="greenText" class="colorGreen">绿色文本.</p>
	<p id="blueText" class="colorBlue">蓝色文本.</p>
	<p id="defaultText">待定颜色</p>
	<button type="button" id="changeColor">_设定红色</button>
	<div id="result"/>
	<script>
		$("#changeColor").click(function(){
			var dt = $("#defaultText");
			console.log(this.innerHTML);
			console.log(this.innerText);
			console.log(this.textContent);
			console.log(this.value);			//empty string
			console.log(this.text);				//undefined
			console.log(this.html);				//undefined
			if(dt.hasClass("colorRed"))
			{
				dt.removeClass("colorRed");
				this.innerText = "设定红色";
//				$(this).text("设定红色");
			}
			else
			{
				dt.addClass("colorRed");
				this.innerText = "取消红色";
//				$(this).text("取消红色");
			}
		});

		$("#result").append("<p>#redText has .colorRed: "+ $("#redText").hasClass("colorRed").toString() +"<\p>");
		$("#result").append("<p>#defaultText has .colorRed: "+ $("#defaultText").hasClass("colorRed").toString()+"<\p>");

	</script>
	<hr/>
	<p>	 <input id="chkbox" type="checkbox" checked="checked"> checked box</input></p>

	<button type="button" id="changeAttr">_选择off(改变attribute是无效的)</button>
	<button type="button" id="changeProp">_选择off</button>
	<div id="result2">hi</div>
	<div id="result3">hi</div>
	<script>
		//document.getElementById("chkbox").removeAttribute("checked");
		$("#changeAttr").click(function(){		//DOM方法removeAttribute()和setAttribute()在jQuery.prop()使用后会失效. 
			var dt = $("#chkbox");
			if(dt.attr("checked"))
			{
				document.getElementById("chkbox").removeAttribute("checked");		//并不会影响到对应prop
				//dt[0].setAttribute("checked", null);
				$(this).text("选择on");
			}
			else
			{
				document.getElementById("chkbox").setAttribute("checked", "checked");		//并不会影响到对应prop
				//dt[0].setAttribute("checked", "checked");
				
				$(this).text("选择off");
			}
			
			$("#result2").html("<p>'checked' attribute="+ $("#chkbox").attr("checked") +"<\p>"
				+"<p>'checked' property="+ $("#chkbox").prop("checked") +"<\p>"
				+"<p> 'checked' property=" +  document.getElementById("chkbox").checked+"</p>"	
				);
		});

		$("#changeProp").click(function(){
			var dt = $("#chkbox");
			if(dt.prop("checked"))
			{
				dt.prop("checked", false);	//并不会影响到对应的attr
				$(this).text("选择on");
			}
			else
			{
				dt.prop("checked", true);	//并不会影响到对应的attr
				$(this).text("选择off");
			}
			$("#result2").html("<p>'checked' attribute="+ $("#chkbox").attr("checked") +"<\p>"
				+"<p>'checked' property="+ $("#chkbox").prop("checked") +"<\p>"
				+"<p> 'checked' property=" +  document.getElementById("chkbox").checked+"</p>"	
				);
		});

		$("#result2").html("<p>'checked' attribute="+ $("#chkbox").attr("checked") +"<\p>"
				+"<p>'checked' property="+ $("#chkbox").prop("checked") +"<\p>"
				+"<p> 'checked' property=" +  document.getElementById("chkbox").checked+"</p>"	
				);

/*
		$("#chkbox").change(function(){
			var dt = $("#chkbox");
			$("#result3").html("<p>'checked' attribute="+ $("#chkbox").attr("checked") +"<\p>"
				+"<p>'checked' property="+ $("#chkbox").prop("checked") +"<\p>");
		});
*/		
	</script>

	<hr/>

	<select id="single">
		<option>Single</option>
		<option>Single2</option>
	  </select>
	   
	  <select id="multiple" multiple="multiple">
		<option selected="selected">Multiple</option>
		<option>Multiple2</option>
		<option selected="selected">Multiple3</option>
	  </select>

	  <div id="result4">hi</div>

	  <script>
		function displayVals() {
		  var singleValues = $( "#single" ).val();
		  var multipleValues = $( "#multiple" ).val() || [];
		  // When using jQuery 3:
		  // var multipleValues = $( "#multiple" ).val();
		  $( "#result4" ).html( "<b>Single:</b> " + singleValues +
			" <b>Multiple:</b> " + multipleValues.join( ", " ) );
		}
		 
		$( "select" ).change( displayVals );
		displayVals();
		</script>

    </body>
</html>
